<template>
  <r-com :leftClass="'zb-left-height'" :rightClass="'zb-right-box'" :groupClass="'zb-group-height'">
    <template slot="top-bar">
      <li class="el-icon-s-promotion">{{resdata.name}}</li>
      <li class="button-group">
        <el-button>
          <i class="el-icon-refresh"></i>换一换
        </el-button>
        <el-button>
          更多
          <i class="el-icon-arrow-right"></i>
        </el-button>
      </li>
    </template>
    <template slot="video-slot">
      <a class="tg-vedio" href="#" v-for="item in data" :key="item._id">
        <!-- 需要放一个鼠标聚焦后 播放截图的img -->
        <div class="video-fm">
          <el-image :src="item.fmPath" lazy></el-image>
          <p class="video-num">
            <span class="el-icon-video-play">33.6万</span>
            <span class="el-icon-thumb">3.9万</span>
            <span class="video-time">02:59</span>
          </p>
          <video-effect :list="item.ImgList"></video-effect>
        </div>
        <a href="#" class="video-name a-link">{{item.title}}</a>
        <a href="#" class="up">up:{{item.author}}</a>
      </a>
    </template>
    <template slot="right-area">
      <div class="rank-box">
        <h3>
          排行榜
          <el-button>
            更多
            <i class="el-icon-arrow-right"></i>
          </el-button>
        </h3>
        <ul class="rank">
          <li>
            <a href="#" class="a-link pop-rank-hover" v-for="item in 10" :key="item">
              <div class="rank-face">
                <span class="rank-span" :class="item>3?'rank-four':' '">{{item}}</span>
                <el-image v-if="item==1" class="icon-image" :src="require('../../assets/icon.jpg')"></el-image>
                <div class="txt" v-if="item==1">
                  <p>成年之后这些就该懂了</p>
                  <p class="p2">综合得分：209.1万</p>
                </div>
                <p v-if="item>1" class="title">羊村之狂龙战神</p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </template>
  </r-com>
</template>
<script>
import Rc from '../common/RowComponent'
import vf from '../common/VideoHover'
export default {
  props: ['resdata', 'data'],
  data() {
    return {}
  },
  components: {
    'r-com': Rc,
    'video-effect': vf,
  },
}
</script>
<style scoped>
.el-tabs__nav-prev {
  display: none !important;
}
.video-name {
  display: inline-block;
  color: #000;
  width: 100%;
  font-size: 13px;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  padding: 10px 0;
  padding-right: 2px;
}
.video-num {
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: left;
  color: #fff;
  padding: 0 6px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}
.video-num::before {
  font-size: 15px;
  margin-right: 5px;
}
.right-box-img {
  margin-top: 20px;
  display: block;
  width: 100%;
  height: 184px;
  border: 1px solid #e7e7e7;
}
.right-box-img .el-image {
  width: 100%;
  height: 100%;
}
.icon-image {
  width: 112px;
  height: 63px;
  vertical-align: middle;
}
.rank-span {
  display: inline-block;
  width: 18px;
  height: 18px;
  color: #fff;
  background-color: #49a5da;
  text-align: center;
  font-size: 14px;
  margin-right: 15px;
  margin-top: 10px;
}
.rank-four {
  background-color: transparent;
  color: #999;
}
.rank-face {
  padding-top: 10px;
  display: flex;
  height: 64px;
}
.rank-face {
  margin-bottom: 10px;
}
.rank li a:nth-child(n + 2) .rank-face {
  height: 25px;
}
.title {
  font-size: 14px;
  height: 20px;
  line-height: 37px;
}
.txt {
  margin-left: 10px;
  font-size: 14px;
  flex: 1;
}
.txt p:first-child {
  height: 45px;
}
.p2 {
  font-size: 12px;
  height: 14px;
  color: #999;
  text-overflow: ellipsis;
  overflow: hidden;
}
.p2:hover {
  color: #999;
}
.button-group {
  float: right !important;
}
.el-button {
  height: 23px;
  font: 12px;
  background: none;
  outline: none;
  padding: 0px 7px;
  border: 1px solid #ccc;
  margin-right: 0px;
  text-align: center;
}
.el-icon-refresh {
  margin-right: 3px;
  font-size: 15px;
  transform: rotateZ(0deg);
  transition: all 0.5s;
}
.el-button:hover .el-icon-refresh {
  color: #999;
  transform: rotateZ(-360deg);
}
.rank-box h3 {
  font-size: 19px;
  font-weight: 400;
  height: 40px;
}
.rank-box h3 .el-button {
  float: right;
  transform: scale(0.9);
}
.video-num span {
  margin-right: 10px;
}
.video-num span::before {
  font-size: 15px;
  vertical-align: middle;
  margin-right: 1px;
}
.video-time {
  float: right;
  margin-right: 0px !important;
}
.up {
  color: #888;
  transition: all 0.2s;
}
.rank-box {
  overflow: hidden;
  height: 458px;
}
@media screen and (max-width: 1450px) {
  .rank-box {
    height: 412px;
  }
  .tg-vedio:nth-child(5) {
    margin-left: 0px;
  }
  .tg-vedio:nth-child(7) {
    margin-left: 10px;
  }
}
</style>
